<template>
<view style="background-color: #f1f8fa;min-height: 90vh;">
	<view class="pay">
		<view class="top">
			<u-cell-group  v-if="this.options.takeout">
				<u-cell
				    size="large"
				    :title="this.takeout.desc"
					:label="this.takeout.name"
				    isLink
				>
				<view slot="icon" class="desc">
					<text>{{this.takeout.phone}}</text>
				</view>
				</u-cell>
				<u-cell
				    size="large"
				    title="预计送达时间"
				    value="14:00"
				    label="特殊时期减少接触，请修改下方订单备注"
					isLink
				></u-cell>
			</u-cell-group>
			<u-cell-group v-if="this.options.ask">
					<u-cell
					    size="large"
					    :title="this.options.ask"
					    isLink
					></u-cell>
					<u-cell
					    size="large"
					    title="取餐时间"
						value="立即用餐"
					    isLink
					></u-cell>
					<view class="phone">
						<text>联系电话</text>
						<view class="phone-text">
							<text>12222222222</text>
							<text class="text">自动填写</text>
						</view>
					</view>
			</u-cell-group>
		</view>
		<view class="center">
			<u-cell-group>
					<view class="shop" v-for="cart in cartList" :key="cart.id">
						<text class="shop-name">
							{{cart.name}}
						</text>
						<text class="shop-num">x{{cart.num}}</text>
						<text class="shop-price">￥{{cart.price}}</text>
					</view>
					<template v-if="this.options.takeout">
						<u-cell
							size="large"
							title="包装费"
							value="￥2"
						></u-cell>
						<u-cell
							size="large"
							title="配送费"
							value="￥2"
						></u-cell>
					</template>
					<u-cell
					    size="large"
					    title="奈雪券"
						value="超值购买优惠券大礼包"
					    isLink
					></u-cell>
					<u-cell
					    size="large"
					    title="礼品卡"
					    value="请选择"
						isLink
					>
					</u-cell>
					<view class="total">
						<text class="def">
							总计￥{{totalPrice}},实付
						</text>
						<text class="bold">￥{{totalPrice}}</text>
					</view>
			</u-cell-group>
		</view>
		<view class="title">
			<u-icon name="question-circle" size="12" color="#FAB714"></u-icon>
			优惠券不与满赠、满减活动共享
		</view>
		<view class="bottom">
			<u-cell-group>
					<u-cell
					    size="large"
					    title="支付方式"
					></u-cell>
					<view class="pay">
						<view class="icon">
							<u-icon name="rmb-circle-fill" size="20"></u-icon>
							<text class="pay-text">余额支付(余额￥{{this.balance}})</text>
						</view>
						<view style="display: flex;">
							<text v-if="this.balance<totalPrice">余额不足</text>
							<u-radio-group>
								<u-radio shape="circle"></u-radio>
							</u-radio-group>
						</view>
					</view>
			</u-cell-group>
		</view>
	
	</view>
	<!-- 付款 -->
	<view class="pay-bottom">
		<view class="totalMoney">合计:<text class="price">￥{{totalPrice}}</text></view>
		<u-button class="pay-btn" text="付款" @tap="pay"></u-button>
	</view>
	<!-- 是否支付 -->
	<template>
		<view >
			<u-modal :show="show" title="确认支付" showCancelButton @confirm="confirmPay" @cancel="cancel"></u-modal>
		</view>
	</template>
</view>
</template>

<script>
	import {mapState,mapActions} from 'vuex'
	import {addOrderApi,getOrderListApi,getOrderApi,payOrderListApi,updOrderListApi} from '@/service/index.js'
	export default {
		data() {
			return {
				takeout:'',
				cartList:[],
				addr_id:'',
				orderId:'',
				show:false,
				balance:''
			}
		},
		computed:{
			totalPrice(){
				let prispread=this.options.takeout?4:0
				return this.cartList.reduce((prev,item)=>{
					return prev+item.num*item.price
				},prispread)
			}
		},
		onLoad(options) {
			if(options.takeout){
				this.takeout=uni.getStorageSync('addInfo')
				this.addr_id=this.takeout.id
			}else{
				// console.log(uni.getStorageSync('addInfo'));
				this.addr_id=uni.getStorageSync('addInfo').id
			}
			this.cartList=uni.getStorageSync('shopCartList')
			this.balance=uni.getStorageSync('money')
		},
		methods: {
			// ...mapActions('order',['addOrder']),
			// 创建订单
			async pay(){
				let goods_info=[]
				this.cartList.forEach(ele=>{
					let data={}
					data.id=ele.id
					data.num=ele.num
					goods_info.push(data)
				})
				let res=await addOrderApi({goods_info,addr_id:this.addr_id})
				this.orderId=res.data.result.id
				this.show=true
			},
			// 确认支付按钮
			async confirmPay(){
				let res=await payOrderListApi({id:this.orderId})
				if(res.statusCode===200){
					// 更新订单信息
					await updOrderListApi(res.data.data.id,{status:'2',addr_id:res.data.data.addr_id})
					let result=await getOrderListApi({limit:100})
					if(result.statusCode===200){
						uni.setStorageSync('orderList',result.data.result.rows)
					}
					this.show=false
					uni.switchTab({
						url:'/pages/take-foods/take-foods'
					})
				}
			},
			// 取消/
			cancel(){
				this.show=false
			}
		}
	}
</script>

<style lang="scss" scoped>
.pay{
	padding: 30rpx;
	padding-bottom: 150rpx;
	background-color: #f1f8fa;
	width: 100%;
	box-sizing: border-box;
	.top,.center,.bottom{
		margin-top: 30rpx;
		background-color: #fff;
	}
	.top{
		.desc{
			position: absolute;
			left: 200rpx;
			bottom: 170rpx;
			color: #909193;
			font-size: 24rpx;
		}
		.phone{
			display: flex;
			justify-content: space-between;
			padding: 26rpx 30rpx;
			width: 690rpx;
			height: 96rpx;
			background-color: #fff;
			box-sizing: border-box;
			.phone-text{
				.text{
					margin-left: 10rpx;
					border: 2rpx solid #ADB838;
					padding: 6rpx 10rpx;
					color: #ADB838;
					font-size: 24rpx;
				}
			}
		}
	}
	.center{
		.shop{
			display: flex;
			justify-content: space-between;
			padding: 26rpx 30rpx;
			width: 690rpx;
			height: 96rpx;
			background-color: #fff;
			box-sizing: border-box;
		}
		.total{
			padding: 26rpx 30rpx;
			width: 690rpx;
			height: 96rpx;
			background-color: #fff;
			box-sizing: border-box;
			text-align: right;
			.def{
				font-size: 28rpx;
				color: rgb(90, 91, 92);
			}
			.bold{
				font-weight: 700;
			}
		}
	}
	.title{
		margin: 20rpx auto;
		display: flex;
		font-size: 24rpx;
		color: #FAB714;
	}
	.bottom{
		.pay{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 26rpx 30rpx;
			width: 690rpx;
			height: 96rpx;
			background-color: #fff;
			box-sizing: border-box;
			.icon{
				display: flex;
				align-items: center;
			}
			.pay-text{
				margin: 0 100rpx 0 10rpx;
				font-size: 28rpx;
				color: #878889;
			}
		}
	}
}
.pay-bottom{
	position: fixed;
	bottom: 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 750rpx;
	height: 100rpx;
	background-color: #fff;
	.totalMoney{
		margin-left: 20rpx;
		font-size: 24rpx;
		.price{
			margin-left: 10rpx;
			font-size: 32rpx;
		}
	}
	.pay-btn{
		margin: 0;
		background-color: #ADB838;
		height: 100%;
		width: 200rpx;
	}
}
</style>
